<template>
  <c-back-wrap :loading="loading" go-page="经销商门店业务变更" current-page="详情">
    <c-title title="经销商-客户基本信息">
      <CusetomerBaseInfoView :detail="detail" />
    </c-title>
    <c-title title="经销商-选择待变更门店">
      <ChangeTable :table-data="changeTableData" type="view" />
    </c-title>
    <c-title title="经销商-门店业务类型变更信息">
      <!-- <el-collapse v-model="activeName"> -->
      <c-collapse-item v-for="(d,i) in changeResultTableData" :key="i" :name="i+1">
        <div slot="title" class="change-table-title">
          <span>{{ d.code }}</span>
          <span>{{ d.name }}</span>
          <span>{{ d.shopAddr }}</span>
        </div>
        <QupList v-if="isAdd" :column="3" sep="：" default-value="" label-position="right" label-width="140">
          <QupListItem label="是否报图" :value="d.isReportPic" dict-type-code="BOOLEANS" :prop-enum="{domainCode:'marketing',appCode:'slm'}" :span="24" />
          <QupListItem label="成品面积" :value="`${d.endProductArea || 0}㎡`" />
          <QupListItem label="全屋定制面积" :value="`${d.fullHouseArea || 0}㎡`" />
          <QupListItem label="整体橱柜面积" :value="`${d.cabinetArea || 0}㎡`" />
          <QupListItem label="卫浴面积" :value="`${d.bathroomArea || 0}㎡`" />
          <QupListItem label="样板间面积" :value="`${d.modelRoomArea || 0}㎡`" />
          <QupListItem label="窗帘面积" :value="`${d.curtainArea || 0}㎡`" />
          <QupListItem label="橱柜套数" :value="d.cabinetSuite || 0" />
          <QupListItem label="卫浴套数" :value="d.bathroomSuite || 0" />
          <QupListItem label="单店总面积" :value="`${d.totalArea || 0}㎡`" />
          <QupListItem label="是否缴纳保证金" :value="detail.isDeposit" dict-type-code="BOOLEANS" :prop-enum="{domainCode:'marketing',appCode:'slm'}" />
          <QupListItem v-if="[1, '1'].includes(detail.isDeposit)" label="保证金缴纳日期" :value="$trimHMS(detail.depositDate)" />
          <QupListItem label="成品保证金金额(元)" :value="`${detail.finishedDeposit || 0}`" />
          <QupListItem label="定制保证金金额(元)" :value="`${detail.customizedDeposit || 0}`" />
          <QupListItem label="橱柜保证金金额(元)" :value="`${detail.cupboardDeposit || 0}`" />
          <QupListItem label="卫浴保证金金额(元)" :value="`${detail.bathroomDeposit || 0}`" />
          <QupListItem label="变更后经营业务类型" :value="d.afterBusinessTypeName" :span="24" />
          <QupListItem label="补充协议附件" :span="24">
            <c-file-list :uploadable="false" :editable="false" :model-id="d.id" view-type="list" type-code="ACCESS065" />
          </QupListItem>
          <QupListItem v-if="![1,'1'].includes(d.isReportPic)" label="特殊建档附件" :span="24">
            <c-file-list :uploadable="false" :editable="false" :model-id="d.id" view-type="list" type-code="ACCESS067" />
          </QupListItem>
        </QupList>
        <QupList v-else :column="1" sep="：" default-value="" label-position="right" label-width="140">
          <QupListItem label="变更后经营业务类型" :value="d.afterBusinessTypeName" />
          <QupListItem label="业务类型取消原因" :value="d.cancelReason" :span="24" />
          <QupListItem label="取消业务附件" :span="24">
            <c-file-list :uploadable="false" :editable="false" :model-id="d.id" view-type="list" type-code="ACCESS068" />
          </QupListItem>
        </QupList>
      </c-collapse-item>
      <!-- </el-collapse> -->
    </c-title>
    <c-title title="经销商-客户业务类型变更信息">
      <QupList :column="3" sep="：" default-value="" label-position="right" label-width="150">
        <template v-if="isAdd">
          <QupListItem label="是否新增客户业务类型" :value="detail.isChangeBusinessType" dict-type-code="BOOLEANS" :prop-enum="{domainCode:'marketing',appCode:'slm'}" />
          <QupListItem label="变更的业务类型" :value="detail.afterBusinessTypeName">
            <c-mdm-view :value="detail.afterBusinessTypeCode" :label="detail.afterBusinessTypeName" doc-code="QY037" />
          </QupListItem>
          <QupListItem label="是否新增业务账号" :value="detail.isChangeAccount" dict-type-code="BOOLEANS" :prop-enum="{domainCode:'marketing',appCode:'slm'}" />
        </template>
        <template v-else>
          <QupListItem label="是否变更客户业务类型" :value="detail.isChangeBusinessType" dict-type-code="BOOLEANS" :prop-enum="{domainCode:'marketing',appCode:'slm'}" />
          <QupListItem label="调整的业务类型" :value="detail.afterBusinessTypeName">
            <c-mdm-view :value="detail.afterBusinessTypeCode" :label="detail.afterBusinessTypeName" doc-code="QY037" />
          </QupListItem>
          <QupListItem label="是否取消业务账号" :value="detail.isChangeAccount" dict-type-code="BOOLEANS" :prop-enum="{domainCode:'marketing',appCode:'slm'}" />
        </template>
        <QupListItem label="账号编码" :value="detail.accountCode" />
        <QupListItem label="账号名称" :value="detail.accountName" />
        <QupListItem label="账号类型" :value="detail.accountTypeName" />
      </QupList>
    </c-title>
    <c-title title="BPM审核信息">
      <QupList :column="3" sep="：" default-value="" label-position="right" label-width="140">
        <QupListItem label="变更进度" :value="detail.schedule" dict-type-code="CTM_CUS_ARCHIVE_CHANGE_PROGRESS" :prop-enum="{domainCode:'marketing',appCode:'slm'}" />
        <QupListItem :value="detail.createTime" label="申请时间" />
        <QupListItem :value="detail.applyNo" label="BPM单号" />
        <!-- <QupListItem label="办事处审批结果" :value="detail.officeReviewResult" dict-type-code="REVIEW_RESULT" :prop-enum="{domainCode:'marketing',appCode:'slm'}" /> -->
        <!-- <QupListItem :value="detail.officeReviewTime" label="办事处审批结束时间" /> -->
        <!-- <QupListItem :value="detail.officeReviewAdvice" label="办事处审批意见" :span="24" /> -->
        <!-- <QupListItem :value="detail.officeAccountingReviewAdvice" label="办事处会计处理意见" :span="24" /> -->
        <!-- <QupListItem label="档案科审核结果" :value="detail.fileReviewResult" dict-type-code="REVIEW_RESULT" :prop-enum="{domainCode:'marketing',appCode:'slm'}" /> -->
        <!-- <QupListItem :value="detail.fileReviewTime" label="档案科审核时间" /> -->
        <!-- <QupListItem :value="detail.fileReviewAdvice" label="档案科审核意见" :span="24" /> -->
        <!-- <QupListItem :value="detail.authorityReviewTime" label="系统权限处理审核时间" /> -->
        <!-- <QupListItem :value="detail.authorityReviewAdvice" label="系统权限处理审核意见" :span="24" /> -->
      </QupList>
      <Options :data="detail.opinionDTOS" />
    </c-title>

    <div class="btn-center">
      <c-button type="primary" @click="handleGoBack">返回</c-button>
    </div>
  </c-back-wrap>
</template>
<script>
import { shopBusinessDetail } from '@/api/channelTask2/shopChange'
import CusetomerBaseInfoView from '@/views/channelTask2/dealerMarketingInfo/archive/components/CustomerBaseInfoView'
import ChangeTable from '../../components/ChangeTable'
import Options from '../../components/Options'

export default {
  name: 'Detail',
  components: {
    ChangeTable,
    CusetomerBaseInfoView,
    Options
  },
  props: {
    id: {
      type: String,
      default: ''
    },
    isAdd: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      detail: {},
      loading: false,
      activeName: 1
    }
  },
  computed: {
    changeTableData() {
      return this.detail.shopBusinessDTOS || []
    },
    changeResultTableData() {
      return this.changeTableData.filter(e => [1, '1'].includes(e.isChange))
    }
  },
  created() {
    this.getDetailData()
  },
  methods: {
    getDetailData() {
      this.loading = true
      return shopBusinessDetail(this.id).then(res => {
        this.detail = res.data
      }).finally(() => {
        this.loading = false
      })
    },
    handleGoBack() {
      this.$pageStack.pop()
    },
    handleChangeTable(tableData) {
      this.changeResultTableData = tableData
      console.log('变更的门店数据', tableData)
    }
  }
}
</script>
<style lang="scss" scoped>
.change-table-title{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  &>span{
    color: #333;
    font-size: 16px;
    font-weight: 600;
    margin-right: 10px;
  }
}
</style>
